<!--商品详细 包含添加购物车-->
<template>
  <div class="details-box">
    <!-- 商品图片展示区域，优先显示实际图片，否则显示默认图片 -->
    <img v-if="data.picture" :src="$store.state.imgShowRoad + '/file/' + data.picture" alt="商品图片"/>
    <img v-else src="../../../assets/img/wutu.gif" alt="无图" style="border:1px solid #f2f2f2;"/>

    <div class="info">
      <h4 class="title">{{ data.title }}</h4>
      <!-- 商品描述，超出部分显示省略号 -->
      <div class="content" :title="data.content">{{ data.content }}</div>
      <span class="price">￥{{ data.price }}</span>

      <div class="time">
        <span style="margin-right:40px;">发布时间：{{ data.createTime | changeTime }}</span>
        <span>最近修改时间：{{ data.updateTime | changeTime }}</span>
      </div>

      <div class="item-style">
        <!-- 点赞、收藏、评论操作区 -->
        <div class="operation">
          <div class="operation-item"><img src="../../../assets/img/good.png" class="operation-img" alt="点赞"/> 点赞
          </div>
          <div class="operation-item"><img src="../../../assets/img/no-star.png" class="operation-img" alt="收藏"/> 收藏
          </div>
          <div class="operation-item"><img src="../../../assets/img/fill-in.png" class="operation-img" alt="评论"/>评论
          </div>
        </div>

        <!-- 操作按钮区 -->
        <div class="btn-content">
          <!-- 商品类型显示加入购物车按钮 -->
          <el-button type="danger" @click="addShopcartClick" v-if="data.type === 'goods'">加入购物车</el-button>

          <!-- 需求类型显示联系买家按钮，悬停显示卖家信息 -->
          <el-popover placement="right" width="320" trigger="hover">
            <div>
              <div class="item-sales">卖家姓名：<span class="sales-text">{{ updateUserData.userName }}</span></div>
              <div class="item-sales">卖家地址：<span class="sales-text">{{ updateUserData.address }}</span></div>
              <div class="item-sales">卖家手机号码：<span class="sales-text">{{ updateUserData.phone }}</span></div>
              <div class="item-sales">更新时间：<span
                  class="sales-text">{{ updateUserData.updateTime | formatTimer }}</span></div>
            </div>
            <el-button type="danger" slot="reference" @click.once="changeInfo(item.orderId)"
                       v-show="data.type === 'needs'">联系买家
            </el-button>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {addOrderToCart} from "@/api/cart";
import {selectOrderById} from "@/api/order";
import ChangeMessage from "../../../components/message/ChangeMessage.vue";
import {selectUserByUsername} from "@/api/user";

export default {
  data() {
    return {
      data: [], // 商品/需求详情数据
      ownerInfo: {}, // 卖家信息
      userGoods: [], // 用户商品列表
      updateGoodInfo: {}, // 更新的商品信息
      updateUserData: {} // 更新的用户数据
    };
  },
  filters: {
    // 格式化时间为 YYYY-MM-DD
    changeTime(time) {
      return time.slice(0, 10);
    },
    // 格式化时间为 YYYY-MM-DD hh:mm:ss
    formatTimer: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + MM + "-" + d + " ";
    }
  },
  components: {ChangeMessage},
  props: {
    ctype: {type: String}, // 类型属性
    cdesciibe: {type: String} // 描述属性
  },
  methods: {
    // 添加商品到购物车
    addShopcartClick() {
      addOrderToCart({order_id: this.data.orderId})
          .then((res) => {
            alert(res.message);
          })
          .catch((err) => {
            alert("添加失败,请先登录");
          });
    },

    // 更改订单信息
    changeInfo(item) {
      this.$store.commit("updateChangedOrderId", item);
      selectOrderById({order_id: this.$store.state.changedOrderId})
          .then((res) => {
            this.updateGoodInfo = res.data;
          })
          .catch((err) => {
            console.log(err);
          });
    },

    // 获取卖家信息
    getSalesInfo() {
      selectUserByUsername({user_name: this.data.ownName})
          .then((res) => {
            this.updateUserData = res.data;
          })
          .catch(err => {
            console.log(err);
          });
    }
  },

  // 组件挂载后获取订单详情和卖家信息
  mounted() {
    selectOrderById({order_id: this.$route.query.orderId})
        .then((res) => {
          if (res.flag === true) {
            this.data = res.data;
            this.getSalesInfo(); // 获取卖家信息
          }
        });
  },
};
</script>

<style lang="less" scoped>
/* 商品详情容器 */
.details-box {
  width: 1100px;
  height: 100%;
  margin: 20px auto;
  padding: 20px;
  background: #e8ecef;
  display: flex;
  justify-content: space-between; /* 子元素两端对齐 */

  img {
    width: 500px;
    height: 500px;
    border-radius: 6px; /* 圆角 */
  }

  .info {
    position: relative; /* 相对定位 */
    width: 680px;
    height: 300px;
    border: 1px solid #f2f2f2;
    border-radius: 6px;
    padding: 10px 20px;

    .title {
      font-size: 22px;
      font-weight: bold;
    }

    .content {
      height: 100px;
      border: 1px dashed #f2f2f2;
      line-height: 23px;
      padding: 5px 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
    }

    .price {
      color: red;
      font-size: 40px;
      font-weight: bold;
    }

    .time {
      margin-top: 5px;
      color: #04041e;
      display: flex;
      justify-content: flex-start;
    }

    .item-style {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-top: 5px;
      align-items: center;
    }
  }

  .operation {
    display: flex;
    margin-top: 10px;
    margin-right: 150px;

    .operation-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-right: 10px;

      .operation-img {
        width: 20px;
        height: 20px;
        margin-bottom: 5px;
        border-radius: 6px;
      }
    }
  }

  .btn-content {
    margin-top: 10px;
  }

  .item-sales {
    color: #333;
    line-height: 30px;
    max-height: 30px; /* 最大高度 */

    .sales-text {
      color: #e75e5e; /* 卖家信息颜色 */
    }
  }
}
</style>